<link href="jquery-bubble-popup/jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui/css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js"> </script>
<script src="jquery-bubble-popup/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>

<br>
<br>
<br>
<br>
<br>

<div class="grd">
  <img src="image.jpg" border="0"/>
  <span id="marker" class="marker"></span>
  <span id="per-marker" class="marker"></span>
</div>

<style type="text/css">
.grd {
    border:1px solid #CECECE; 
    //padding:50px; 
    height:50px; 
    width:147px; 
    position:relative;
}
.grd .marker{
   background: url(markers.png) 0 -25px;
   display: block;
   position: absolute;
   /*padding: 30px;
   margin: 30px
   */
   width: 23px;
   height: 25px;
   top: 5px;
   left:140px;
   border: 0px;
    cursor:pointer;
}
</style>
<script>
function log(msg){
    console.log(msg);
}
log("bb");
$(function(){
    $("#marker").mouseover(function(){
        log('aaaaaaaaaaaaaaaaaa');
        log($("#marker").css('background-position'));
        $("#marker").css({'background-position': '0px -420px' });
    });
});
$(function(){
    $("#marker").mouseout(function(){
        $("#marker").css({'background-position': '0px -25px' });
    });
});

</script>

<script type="text/javascript">
<!--
    $(document).ready(function(){
        $('#marker').CreateBubblePopup({
                //width : '100px',
                //position: 'right',
                //align: 'top',
                innerHtml: '<br/>xxxxxxx <br/>loading <a href="/abc"> lalalalalalalalalallalla</a>!',
                innerHtmlStyle: { color:'#000000', 'text-align':'center' },
                themeName: 'blue',
                themePath: 'jquery-bubble-popup/jquerybubblepopup-theme',
                selectable: true,
                tail : {
                    align:'center',
                    hidden: false
                }
          });


    });
//-->
</script>

